<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="./uikit.min.css" />


    <title>运维端小程序发版工具</title>
</head>

<body>
    <div id="modal-center" class="uk-flex-top" uk-modal>
        <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">

            <button class="uk-modal-close-default" type="button" uk-close></button>

            <form class="uk-form-horizontal uk-margin-large">

                <div class="uk-margin">
                    <label class="uk-form-label" for="form-horizontal-text">微信项目名称</label>
                    <div class="uk-form-controls">
                        <input class="uk-input rust_title" id="form-horizontal-text" type="text" placeholder="项目名称">
                    </div>
                </div>
                <div class="uk-margin">
                    <label class="uk-form-label" for="form-horizontal-text">微信appId</label>
                    <div class="uk-form-controls">
                        <input class="uk-input rust_appid" id="form-horizontal-text" type="text" placeholder="项目内容">
                    </div>
                </div>
                <div class="uk-margin">
                    <label class="uk-form-label" for="form-horizontal-text">微信私钥</label>
                    <div class="uk-form-controls">
                        <input class="uk-input rust_keys" id="form-horizontal-text" readonly type="text" placeholder="密钥">
                        <div uk-form-custom="target: true">
                            <input type="file" class="file">
                            <input class="uk-input uk-form-width-medium" type="text" placeholder="请选择密钥" disabled>
                        </div>
                        <a class="uk-button uk-button-default" onclick="handelAddKeys()">上传密钥</a>
                    </div>
                </div>

            </form>
            <button class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom" onclick="handelAdd()">添加</button>


        </div>
    </div>
    <div style="margin: 0 auto;width: 1200px;">
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">运维端小程序发版工具</h3>
            <button class="uk-button uk-button-danger" href="#modal-center" uk-toggle>添加</button>
            <button class="uk-button uk-button-primary" onclick="handelIsWx()"><div uk-spinner style="margin-right: 10px;display: none;"></div>编译微信</button>
            <table class="uk-table uk-table-divider">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>appid</th>
                        <th>私钥</th>
                        <th>上传</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                    <% for(var i=0; i<list.length; i++) { %>
                        <tr>
                            <td>
                                <%= list[i].id %>
                            </td>
                            <td>
                                <%= list[i].title %>
                            </td>
                            <td>
                                <%= list[i].appid %>
                            </td>
                            <td>
                                <%= list[i].keys %>
                            </td>
                            <td>
                                <button class="uk-button uk-button-primary" onclick="handelIs('<%= list[i].id %>')"><div uk-spinner style="margin-right: 10px;display: none;"></div>上传微信</button>
                                <button class="uk-button uk-button-danger">上传支付宝</button>
                            </td>
                            <td>
                                <a class="uk-icon-link uk-margin-small-right" uk-icon="file-edit"></a>
                                <a onclick="handelDel('<%= list[i].id %>')" class="uk-icon-link" uk-icon="trash"></a>
                            </td>
                        </tr>
                        <% } %>
                </tbody>
            </table>
        </div>
    </div>
</body>
<!-- UIkit JS -->
<script src="./uikit.min.js"></script>
<script src="./uikit-icons.min.js"></script>
<script src="./jquery.min.js"></script>
<script>
    function handelDel(id) {
        console.log(id)
        $.ajax({
            type: 'post',
            url: '/article/del',
            dataType: "json",
            data: {
                id
            },
            success: function(data) {
                if (data.code == 200) {
                    UIkit.notification({
                        message: '删除成功',
                        status: 'success'
                    })
                    location.reload();
                } else {
                    UIkit.notification({
                        message: '删除失败',
                        status: 'warning'
                    })
                }
            }
        })
    }

    function handelIsWx() {
        var that = event.currentTarget;
        $(that).find('div').show()
        $.ajax({
            type: 'post',
            url: '/compile',
            dataType: "json",
            success: function(data) {
                if (data.code == 200) {
                    UIkit.notification({
                        message: '编译成功',
                        status: 'success'
                    })
                } else {
                    UIkit.notification({
                        message: '编译失败',
                        status: 'warning'
                    })
                }

                $(that).find('div').hide()
            }
        })
    }

    function handelIs(params) {
        var that = event.currentTarget;
        $(that).find('div').show()
        $.ajax({
            type: 'post',
            url: '/addwx',
            data: {
                id: params
            },
            dataType: "json",
            success: function(data) {
                if (data.code == 200) {
                    UIkit.notification({
                        message: '上传成功',
                        status: 'success'
                    })
                } else {
                    UIkit.notification({
                        message: '上传失败',
                        status: 'warning'
                    })
                }

                $(that).find('div').hide()
            }
        })
    }

    function handelAdd() {

        var data = {
            title: $('.rust_title').val(),
            appid: $('.rust_appid').val(),
            keys: $('.rust_keys').val(),
        }

        // 发生post请求
        $.ajax({
            type: "POST",
            url: "/article/add",
            data: data,
            dataType: "json",
            success: function(data) {
                console.log(data, 'data', data.code)
                if (data.code == 200) {

                    UIkit.notification({
                        message: '创建成功',
                        status: 'success'
                    })
                    UIkit.modal($('.uk-flex-top')[0]).hide();
                    location.reload()
                } else {
                    UIkit.notification({
                        message: '创建失败',
                        status: 'warning'
                    })
                }
            }
        });
    }

    function handelAddKeys() {
        let formData = new FormData(); //创建 formData实例
        formData.append('file', $('.file')[0].files[0]); //给formData实例添加一个 表单项
        // 发生post请求
        $.ajax({
            type: "POST",
            url: "/upload",
            data: formData,
            processData: false, //告诉jQuery不用处理发送的数据
            contentType: false, //考试jQuery不用设置content-type请求头
            success: function(data) {
                console.log(data, 'data', data.code)
                if (data.code == 200) {
                    UIkit.notification({
                        message: '上传成功',
                        status: 'success'
                    })
                    var upload = data.name.slice(7)
                    $(".rust_keys").val(upload)
                } else {
                    UIkit.notification({
                        message: '上传失败',
                        status: 'warning'
                    })
                }
            }
        });
    }
</script>

</html>
